<template>
    <div class="examInstruction-container">
        <nav-bar title="试卷"></nav-bar>
        <div class="exam-instruction">
            <div class="count-down" v-if="!timeOver">
                距离考试开始还剩：
                <van-count-down ref="countDown" :time="time" @finish="finish"/>
            </div>
            <div class="count-down" v-else>考试已开始</div>
            <h3>考试须知</h3>
            <p>1. 考试使用计算机进行答卷。</p>
            <p>
                2.
                必备物品：学生证/一卡通（在校生）或身份证/护照（结业生），钢笔、圆珠笔或签字笔。可携带物品：手表或无声座钟。
            </p>
            <p>
                3.
                禁止考试时在座位周围出现的物品：手机等通讯设备；电子翻译设备；相关书籍、复习资料、纸张等。
            </p>
            <p>（二）考场纪律</p>
            <p>
                1.
                考生携带有效证件提前20分钟进入考场，按要求入座，并把学生证放在课桌左上角，等候检查。迟到30分钟不准入场，考试开始30分钟后方可交卷。
            </p>
            <p>
                2.
                考试时请保持考场安静，如有问题，举手示意。考场内不得相互私自借用文具，不得交头接耳、暗示、抄袭，不得代考。发现作弊、违纪行为一律按学校有关规定严肃处理。
            </p>
            <p>3. 严格遵守考场纪律，不准执行与考试无关的计算机操作。</p>
            <p>（三）考试要求</p>
            <p>1. 考试科目和时间见黑板。</p>
            <p>
                2.
                本考试采用计算机考核，考生应按要求下载系统，填写个人相关信息及密码后登录系统，学号及姓名输入错误者不能进入系统。同时需在草稿纸上填写姓名和学号，考试结束后将收回。
            </p>
            <p>
                3.
                本次考试限定总的答题时间，不限定每道小题时间，答题过程中可标记和回看试题，点击页面右侧题号可跳转至对应试题。试题全部作答完毕再点击交卷，交卷后则无法继续作答本套试卷。
            </p>
            <p>
                4.
                在考试过程中不可离开考场，若不慎退出了系统，再次登录时，需输入首次登录密码，再根据提示输入二次登录密码。
            </p>
            <p>5．考试期间学生有问题需要举手向老师示意，监考教师不对试卷内容做任何解答。考试过程中不允许去洗手间。</p>
            <p>6．考试结束时，考生应停止答题操作，坐在原位，保持安静，根据监考教师指令进行相关操作。查看系统确认考生全部交卷。等待监考老师收齐草稿纸，方可离开教室。</p>
            <p>特别提醒：全部答题完毕再点击提交！请注意考试时间！</p>
        </div>
        <div class="btn-wrap" v-if="checkShow">
            <input class="input" type="text" placeholder="请输入6位的考试编码" v-model="examCode">
            <div class="check-btn" @click="codeCheck">验证</div>
        </div>
        <div class="btn-wrap" v-else>
            <div class="btn" @click="startExam">开始考试</div>
        </div>
    </div>
</template>
<script>
export default {
    name: "examInstruction",
    components: {},
    data() {
        return {
            time: 0,
            checkShow: true,
            examCode: "",
            timeOver: false,
        };
    },
    mounted() {
        var { examCode, examStartTime, examId } = this.$route.query;
        this.examId = examId;
        this.examStartTime = examStartTime;
        this.time = examStartTime - new Date().getTime();
        // var base =
        //     "";
        // base = CryptoJS.enc.Base64.parse(base);
        // console.log(base);
        // var bytes = CryptoJS.AES.decrypt(base, "1111111111111111", {
        //     mode: CryptoJS.mode.ECB,
        //     padding: CryptoJS.pad.Pkcs7,
        // });
        // console.log(bytes);
        // const resultDecipher = bytes.toString(CryptoJS.enc.Utf8);
        // console.log(resultDecipher);
        // // var decryptResult = bytes.toString(CryptoJS.enc.Utf8);
        // // console.log(decryptResult.toString().toUpperCase());
        // //
        // // console.log(1111, aes.decrypt(base, "1111111111111111").toString(aes.Utf8));
    },
    methods: {
        startExam() {
            console.log();
            if (this.$route.query.examStartTime - new Date().getTime() <= 0) {
                this.$APIs
                    .confirmExam({ examCode: this.examCode, examId: this.examId })
                    .then(response => {
                        console.log(response);
                        this.$router.replace({
                            path: "/exam",
                            query: {
                                examId: this.examId,
                                time: this.$route.query.answerTime,
                            },
                        });
                    })
                    .catch(error => {});
            } else {
                this.$toast.fail("考试未开始");
            }
        },
        codeCheck() {
            if (this.examCode === this.$route.query.examCode) {
                this.checkShow = false;
            } else {
                this.$toast.fail("考试编码不正确");
            }
        },
        finish() {
            this.timeOver = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.examInstruction-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .count-down {
        font-size: 18px;
        color: #56baca;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
    }
    .van-count-down {
        font-size: 18px;
        color: #56baca;
    }
    .exam-instruction {
        padding: 15px;
        flex: 1;
        overflow: scroll;
        color: #fff;

        h3 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 10px;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 10px;
        }
    }
    .btn-wrap {
        background: #161624;
        padding: 15px;
        display: flex;

        .btn {
            flex: 1;
            background: #56baca;
            color: #fff;
            height: 44px;
            text-align: center;
            line-height: 44px;
            border-radius: 5px;
            font-size: 18px;
            &:active {
                opacity: 0.7;
            }
        }
        .input {
            flex: 1;
            height: 44px;
            border: 1px solid #56baca;
            border-radius: 10px;
            padding: 5px 10px;
            font-size: 18px;
            margin-right: 15px;
            background-color: #161624;
        }
        .check-btn {
            width: 80px;
            height: 44px;
            background: #56baca;
            border-radius: 10px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
